<template>
<view class="page-e tn-safe-area-inset-bottom" style="height: 100%;overflow-y: scroll;">
  <!-- 顶部自定义导航 -->
  <nav-back/>

  <view class="tn-margin-left tn-margin-right" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

    <!-- 更多信息-->
    <view class="wallpaper-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
      <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
        <button class="tn-flex tn-flex-col-center tn-button--clear-style" @click="cacheShow = true">
          <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
                style="color: #7C8191;">
            <view class="tn-icon-clear"></view>
          </view>
          <view class="tn-flex tn-flex-row-between" style="width: 100%;">
            <view class="tn-margin-left-sm">清除缓存</view>
            <view class="tn-color-gray">
                {{ cacheSize }} <text class="tn-icon-right"></text>
            </view>
          </view>
        </button>
      </tn-list-cell>
    </view>

    <view class="tn-flex tn-flex-row-between" v-if="isLogin">
      <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
        <tn-button @click="onLogout" shape="round" backgroundColor="#1D2541" fontColor="#ffffff" padding="40rpx 0" width="60%">
          <text class="">退出登录</text>
        </tn-button>
      </view>
    </view>
  </view>
  <tn-modal v-model="cacheShow" title="温馨提示" content="确定清理缓存吗" :button="cacheButton" @click="clearCache"></tn-modal>
</view>
</template>

<script>
import { mapState } from 'vuex'
import NavBack from "@/components/nav-back";
import { logout } from "@/api/auth/auth";
import { clearToken, isLogin } from "@/utils/auth";

export default {
  data() {
    return {
      cacheShow: false,
      cacheButton: [{
        text: '取消',
        backgroundColor: '#AAAAAA',
        fontColor: '#FFFFFF',
        shape: 'round'
      },
        {
          text: '确定',
          backgroundColor: '#1D2541',
          fontColor: '#F4F6FA'
        }
      ],
      cacheSize: '0KB',
      isLogin: false
    }
  },
  components: { NavBack },
  computed: {
    ...mapState(['vuex_user']),
  },
  onShow() {
    this.calculateCache()
    this.isLogin = isLogin()
  },
  methods: {
    tn(url) {
      uni.navigateTo({
        url: url
      })
    },
    // 计算缓存
    calculateCache() {
      const res = uni.getStorageInfoSync()
      const size = res.currentSize;
      if (size >= 1048576) {
        this.cacheSize = (size / 1048576).toFixed(2) + 'GB'
      } else if (size >= 1024) {
        this.cacheSize = (size / 1024).toFixed(2) + 'MB'
      } else {
        this.cacheSize = size + 'KB'
      }
    },
    clearCache({ index }) {
      if (index === 1) {
        uni.clearStorageSync();
        this.cacheSize = '0KB'
      }
      this.cacheShow = false
    },
    async onLogout() {
      try {
        uni.showLoading({title: '正在退出'})
        await logout()
        uni.switchTab({url: '/pages/home/home'})
        clearToken()
        this.$t.vuex('vuex_user', {})
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-e {
  max-height: 100vh;
}

/* 图标容器5 start */
.icon5 {
  &__item {
    // width: 30%;
    background-color: $tn-bg-color;
    border-radius: 10rpx;
    padding: 0rpx;
    margin: 0rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;
    &--icon {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;
    }
  }
}
/* 用户头像 start */
.logo-image {
  width: 110rpx;
  height: 110rpx;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

/* 页面阴影 start*/
.wallpaper-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}
/* 页面阴影 end*/

/* 图标容器1 start */
.icon1 {
  &__item {
    background-color: $tn-bg-color;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;
    &--icon {
      width: 40rpx;
      height: 40rpx;
      font-size: 40rpx;
      border-radius: 50%;
      position: relative;
      z-index: 1;
      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
      }
    }
  }
}
/* 图标容器1 end */
.button-shake {
  animation: shake 4s infinite;
}
@keyframes shake {
  5%, 50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.15);
  }
  20% {
    transform: scale(1.15) rotate(-5deg);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
  }
  30% {
    transform: scale(1.15) rotate(-3deg);
  }
  35% {
    transform: scale(1.15) rotate(2deg);
  }
  40% {
    transform: scale(1.15) rotate(0);
  }
}
/* 背景波浪高度 */
.button-number {
  width: 100%;
  height: 150rpx;
  border-radius: 15rpx;
  position: relative;
  z-index: 1;
}
/* 动态背景波浪*/
@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1)
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(1)
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1)
  }
}
.tnwave {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  z-index: -1;
  border-radius: 15rpx;
}
.waveWrapperInner {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
}
.wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}
.bgTop {
  opacity: 0.1;
}
.waveTop {
  background-size: 50% 45px;
}
.waveAnimation .waveTop {
  animation: move_wave 4s linear infinite;
}
.bgMiddle {
  opacity: 0.2;
}
.waveMiddle {
  background-size: 50% 40px;
}
.waveAnimation .waveMiddle {
  animation: move_wave 3.5s linear infinite;
}
.bgBottom {
  opacity: 0.3;
}
.waveBottom {
  background-size: 50% 35px;
}
.waveAnimation .waveBottom {
  animation: move_wave 2s linear infinite;
}
</style>
